<template>
  <div class="login_container">
    <div class="login_box">
<!--      头像区域-->
      <div class="avatar_box">
        <img src="../assets/logo.png">
      </div>
<!--      表单区域-->
      <el-form
        label-width="0px"
        class="login_form"
        :model="loginForm"
        :rules="loginFormRules"
        ref="loginFormRef"
      >
<!--        用户名-->
        <el-form-item prop="username">
          <el-input type="text" prefix-icon="iconfont ele-icon-oonhaoyou" v-model="loginForm.username"></el-input>
        </el-form-item>
<!--        密码-->
        <el-form-item prop="password">
        <el-input  type="password" prefix-icon="iconfont ele-icon-oondunpai" v-model="loginForm.password"></el-input>
        </el-form-item>
<!--        按钮-->
        <el-form-item class="btns">
        <el-button type="primary" @click="login">登录</el-button>
        <el-button type="info" @click="resetLoginForm">重置</el-button>

        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      loginForm: { // 登录表单的数据绑定对象
        username: 'admin',
        password: '123456'
      },
      ruleForm: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
        username: '',
        password: ''
      },
      loginFormRules: { // 表单验证规则对象
        username: [
          { required: true, message: '请输入登录名称', trigger: 'blur' }, // 必填，警告语，失去焦点触发校验
          { min: 3, max: 11, message: '长度在 3 到 11 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 5, max: 15, message: '长度在 5 到 15 个字符', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        region: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ],
        date1: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],
        date2: [
          { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
        ],
        type: [
          { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
        ],
        resource: [
          { required: true, message: '请选择活动资源', trigger: 'change' }
        ],
        desc: [
          { required: true, message: '请填写活动形式', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 重置按钮
    resetLoginForm () {
      // console.log(this)
      this.$refs.loginFormRef.resetFields()// 调用element方法resetFields对整个表单进行重置
    },
    login () {
      this.$refs.loginFormRef.validate(async vaild => { // 同上 对表单进行校验
        // console.log(vaild) // 返回校验结果
        if (!vaild) return
        const { data: res } = await this.$http.post('login', this.loginForm) // 因为我们只需要返回内容中的data对象
        // const res = await this.$http.post('login', this.loginForm)

        //  将const result 解构出data成res对象
        //  用await简化promise操作（await只能用在被anysc修饰的方法中
        console.log(res)// stuld =0  ,password

        if (res.meta.status !== 200) return this.$message.error('登录失败') //  判断状态码不等于200则返回失败提示
        this.$message.success('登录成功')

        window.sessionStorage.setItem('token', res.data.token) //  将token保存在sessionStorage中
        this.$router.push('/home')
      })
    }
  }
}
</script>

<style lang="less" scoped>
  /*@import url('//at.alicdn.com/t/font_2187765_0u8qdynt4rv.css'); //引图标链接  */

  .login_container{
    background-color:#2b4b6b;
    height:100%
  }
  .login_box{
    width:450px;
    height:300px;
    background-color:#fff;
    border-radius:3px;
    position: absolute;
    left: 50%;
    top:50%;
    transform:translate(-50%,-50%)
  }
  .avatar_box{
    height:130px;
    width: 130px;
    border:1px solid #eee;
    border-radius:50%; //圆形边框线
    padding: 10px;
    box-shadow: 0 0 10px #ddd;  //阴影
    position: absolute;//开启绝对定位
    left: 50%;//左偏移父元素的50%
    transform:translate(-50%,-50%);
    background: #fff;
    img{
      width: 100%;
      height: 100%;
      border-radius:50%;
      background: #eee;
    }
  }
  .btns{
    display:flex;
    justify-content: flex-end;
  }
  .login_form{
    position:absolute;
    bottom: 0;
    width: 100%;
    padding:0 20px;
    box-sizing:border-box;//默认属性会右偏移
  }
</style>
